<template>
	<view class="list_box">
		<!-- 菜单左边 -->
		<view class="left">
			<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
				<view class="item" v-for="(item,index) in list" :key="index" :class="{ 'active':index==leftIndex }"
					:data-index="index" @tap="leftTap">{{item.categoryName}}</view>
			</scroll-view>
		</view>
		<view class="main">
			<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }" @scroll="mainScroll"
				:scroll-into-view="scrollInto" scroll-with-animation="true" @touchstart="mainTouch" id="scroll-el">
				<block v-for="(item,index) in list" :key="index">
					<view class="item" :id="'item-'+index">
						<!-- <view class="title">
							<view>{{item.title}}</view>
						</view> -->
						<view class="goods" v-for="(item2,index2) in item.categoryChild" :key="index2" @click="goShow1(item.categoryId,item.categoryName,item2.categoryId,item2.categoryName)"">
							{{item2.categoryName}}
						</view>
					</view>
				</block>

			</scroll-view>
		</view>
		
	
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				scrollHeight: '500px',
				leftArray: [{
						id: '洗剪吹'
					},
					{
						id: '烫拉染'
					},
					{
						id: '产品'
					}
				],
				mainArray: [
					{
						list:[0,1,2,2,2,2],
						title:'洗剪吹'
					},
					{
						list:[1],
						title:'烫拉染'
					},
					{
						list:[2],
						title:'产品'
					}
				],
				topArr: [],
				leftIndex: 0,
				isMainScroll: false,
				scrollInto: '',
				tipsTop: '0px',
				list:''
			}
		},
		onLoad(options) {
			console.log(options.id)
			this.id = options.id
			this.fenLei()
			uni.getSystemInfo({
				success: (res) => {
					/* 设置当前滚动容器的高，若非窗口的告诉，请自行修改 */
					this.scrollHeight = `${res.windowHeight}px`;
					console.log('gaodu', res.windowHeight)
				}
			});
		},
		computed: {

		},
		mounted() {
			this.getListData();

		},
		methods: {
			//寄售订单评价
						fenLei() {
							var that = this
							that.$http.req.ajax({
							     path: ':8069/web/mall/getCategoryList',
								 header: {
								       'token': uni.getStorageSync('token')
								      },
							     afterAjax: (res) => {
									 		console.log(res,'分类')
									 		if (res.code !== 200) {
									 			uni.showToast({
									 				title: '获取分类失败',
									 				icon: 'none'
									 			})
									 		}
									 		if (res.code == 200) {
									 			// console.log('拿到分类',res)
												that.list = res.data
												console.log(that.list,'分类数据')
									 		}
							     }
							    })
						},
			// 跳转到确认订单页
			queren(){
				uni.navigateTo({ 
					url:'./confirmorder'
				})
			},
			/* 获取列表数据 */
			getListData() {
				
				console.log(this.mainArray,'模拟数据')

				this.$nextTick(() => {
					this.getElementTop();
				});
			},
			//获取距离顶部的高度
			getScrollTop(selector) {
				return new Promise((resolve, reject) => {
					let query = uni.createSelectorQuery().in(this);
					query.select(selector + '').boundingClientRect(data => {
						resolve(data.top)
					}).exec();
				})
			},
			/* 获取元素顶部信息 */
			async getElementTop() {
				/* Promise 对象数组 */
				let p_arr = [];

				/* 遍历数据，创建相应的 Promise 数组数据 */
				for (let i = 0; i < this.mainArray.length; i++) {
					const resu = await this.getScrollTop(`#item-${i}`)
					p_arr.push(resu)
				}

				// console.log('p_arr', p_arr)

				/* 主区域滚动容器的顶部距离 */
				this.getScrollTop("#scroll-el").then((res) => {

					let top = res;
					// #ifdef H5
					top += 43; //因固定提示块的需求，H5的默认标题栏是44px
					// #endif

					/* 所有节点信息返回后调用该方法 */
					Promise.all(p_arr).then((data) => {
						console.log('滚动', data)
						this.tipsTop = `${data}px`;
						this.topArr = data;
					});
				})
			},

			/* 主区域滚动监听 */
			mainScroll(e) {
				if (!this.isMainScroll) {
					return;
				}
				let top = e.detail.scrollTop;
				let index = -1;

				if (top >= this.topArr[this.topArr.length - 1]) {
					index = this.topArr.length - 1;
				} else {
					index = this.topArr.findIndex((item, index) => {
						return this.topArr[index + 1] >= top;
					});
				}
				this.leftIndex = (index < 0 ? 0 : index);
			},
			/* 主区域触摸 */
			mainTouch() {
				this.isMainScroll = true;
			},
			/* 左侧导航点击 */
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				this.isMainScroll = false;
				this.leftIndex = Number(index);
				this.scrollInto = `item-${index}`;
			},
			goShow1(e1,e2,e3,e4) {
							console.log(e1,'********')
							console.log(e2,'********')
							console.log(e3,'********')
							console.log(e4,'********')
							if(this.id == 0) {
								uni.navigateTo({
									url:'consignment-content?id='+ e1 +',' + e2 + "," + e3 + ',' + e4
								})
							}
							if(this.id == 1) {
								uni.navigateTo({
									url:'consignment-content2?id='+ e1 +',' + e2 + "," + e3 + ',' + e4
								})
							}
							
						}
		}
	}
</script>

<style lang="scss">

	.list_box {
		border-top: 1px solid #aaa;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;

		.left {
			width: 200rpx;
			background-color: #f6f6f6;
			line-height: 80rpx;
			box-sizing: border-box;
			font-size: 21rpx;

			.item {
				padding-left: 20rpx;
				position: relative;
				height: 100rpx;
				text-align: center;
				line-height: 50rpx;

				&:not(:first-child) {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						border-top: #d6d6d6 solid 1px;
						width: 620upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active,
				&:active {
					color: #1C1C1C;
					background-color: #fff;
				}
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;

			.tips {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				height: 64rpx;
				position: fixed;
				top: 44px;
				right: 0;
				width: 530rpx;
				z-index: 10;
				background-color: #fff;
				padding-left: 10rpx;
			}

			.title {
				line-height: 64rpx;
				position: relative;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color:#5500ff;
				height: 64rpx;
			}

			.item {
				margin-bottom: 10rpx;
				display: flex;
				flex-direction: cloumn;
				justify-content: flex-start;
				flex-wrap: wrap;
			}

			.goods {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				align-content: center;
				margin-left:10rpx;
				margin-bottom: 20rpx;
				width:150rpx;
				text-aligin:centen;
				height:120rpx;
				font-size:21rpx;
				&>image {
					width: 185rpx;
					height: 185rpx;
					margin-right: 16rpx;
				}
				.title {
					font-size: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 36rpx;
					color: #1C1C1C;
					opacity: 1;
					display: flex;
					flex-direction: cloumn;
					justify-content: space-between;
				}
				.describe {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 31rpx;
					color: #1C1C1C;
					opacity: 0.65;

				}

				.xiaoshou {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 31rpx;
					color: #1C1C1C;
					opacity: 0.65;
					margin-top: 14rpx;
				}
				.money {
					display: flex;
					margin-top: 14rpx;
					text {
						font-size: 25rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 36rpx;
						color: #EB3E3E;
						opacity: 1;
					}
					button {
						width: 145rpx;
						height: 62rpx;
						background: #463B97;
						opacity: 1;
						border-radius: 33rpx;
						font-size: 22rpx;
						color: #fff;
						text-align: center;
						line-height: 62rpx;
						margin-left: 80rpx;
					}
				}
			}
		}
	}
	
	// 弹出层
	.eject {
		position: relative;
		width: 699rpx;
		height: 663rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 14rpx;
		.title {
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 40rpx;
			color: #000;
			opacity: 1;
			margin-top: 43rpx;
			margin-left: 25rpx;
		}
		.Specifications {
			font-size: 25rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 36rpx;
			color: #21201D;
			opacity: 0.65;
			margin-top: 22rpx;
			margin-left: 25rpx;
		}
		.Specifications_list {
			display: flex;
			margin-left: 25rpx;
			margin-top: 29rpx;
			.act{
				background: #FFEEEA;
				border: 2rpx solid #FD6746;
				opacity: 1;
				border-radius: 14rpx;
				padding: 16rpx 47rpx;
				margin-right: 47rpx;
				font-size: 22rpx;
				color:#FD6746 ;
			}
			.weiact {
				border: 2rpx solid #F5F5F5;
				opacity: 1;
				border-radius: 14rpx;
				padding: 16rpx 47rpx;
				margin-right: 47rpx;
				font-size: 22rpx;
				color: #1C1C1C;
			}
		}
		// 已选规格
		.Selected {
			display: flex;
			align-items: center;
			width: 699rpx;
			height: 62rpx;
			background: #F8F8F8;
			opacity: 1;
			position: absolute;
			bottom: 105rpx;
			view {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 31rpx;
				color: #C5C5C5;
				opacity: 1;
				margin-left: 25rpx;
				margin-right: 25rpx;
			}
			text {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 31rpx;
				color: #1C1C1C;
				opacity: 1;
				
			}
		}
		.bottom {
			display: flex;
			align-items: center;
			height: 105rpx;
			position: absolute;
			bottom: 0;
			.money {
				display: flex;
				align-items: center;
				margin-left: 25rpx;
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 40rpx;
				color: #EB3E3E;
				opacity: 1;
			}
			.btn {
				width: 312rpx;
				height: 65rpx;
				background: #463B97;
				opacity: 1;
				border-radius: 40rpx;
				font-size: 25rpx;
				text-align: center;
				line-height: 65rpx;
				color: #fff;
				margin-left: 170rpx;
			}
		}
		
	}
	
</style>
